<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>主题切换器图标生成器</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      margin: 20px;
    }
    .icon-container {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 20px;
      margin-top: 20px;
    }
    .icon {
      border: 1px solid #ccc;
      padding: 10px;
      border-radius: 5px;
    }
    h3 {
      margin-top: 10px;
    }
    .instructions {
      max-width: 600px;
      margin: 20px auto;
      text-align: left;
      background-color: #f5f5f5;
      padding: 15px;
      border-radius: 5px;
    }
  </style>
</head>
<body>
  <h1>主题切换器图标</h1>
  <p>以下是三种不同尺寸的SVG图标，请右键点击并保存为PNG格式</p>
  
  <div class="icon-container">
    <div class="icon">
      <svg width="16" height="16" viewBox="0 0 16 16">
        <rect x="0" y="0" width="16" height="16" rx="3" fill="#4285F4" />
        <circle cx="8" cy="8" r="4" fill="#FFFFFF" />
        <path d="M8 4 L8 12 M4 8 L12 8" stroke="#4285F4" stroke-width="1.5" />
      </svg>
      <h3>16x16</h3>
    </div>
    
    <div class="icon">
      <svg width="48" height="48" viewBox="0 0 48 48">
        <rect x="0" y="0" width="48" height="48" rx="8" fill="#4285F4" />
        <circle cx="24" cy="24" r="12" fill="#FFFFFF" />
        <path d="M24 12 L24 36 M12 24 L36 24" stroke="#4285F4" stroke-width="4" />
      </svg>
      <h3>48x48</h3>
    </div>
    
    <div class="icon">
      <svg width="128" height="128" viewBox="0 0 128 128">
        <rect x="0" y="0" width="128" height="128" rx="16" fill="#4285F4" />
        <circle cx="64" cy="64" r="32" fill="#FFFFFF" />
        <path d="M64 32 L64 96 M32 64 L96 64" stroke="#4285F4" stroke-width="8" />
      </svg>
      <h3>128x128</h3>
    </div>
  </div>
  
  <div class="instructions">
    <h2>如何保存图标：</h2>
    <ol>
      <li>右键点击每个图标</li>
      <li>选择"另存为图片"或"保存图片"</li>
      <li>将16x16的图标保存为 <code>images/icon16.png</code></li>
      <li>将48x48的图标保存为 <code>images/icon48.png</code></li>
      <li>将128x128的图标保存为 <code>images/icon128.png</code></li>
    </ol>
    <p>或者，你也可以使用任何图像编辑软件创建自己的图标，并保存为相应的文件名。</p>
  </div>
</body>
</html>